﻿@inherits Kaleido.Util.Mvc.DynamicViewPage
@{
    /* LAYOUT CONFIG */

    var["theme"] = "theme_default"; // name of the subfolder in themes directory for the theme you want

    var["font"] = ""; // leave blank if you want to use the default one, otherwise  ex:  "'Open Sans', Segoe UI light, Tahoma,Helvetica,sans-serif"
    var["googleFontURL"] = "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600"; // leave blank if you don't want a special one


    var["maxPageWidth"] = 900; // max width of page in px


    /* Tile options */
    var["scale"] = 145; // size of 1 tile of 1x1, in px
    var["spacing"] = 10; // space between tiles, in px

    /* Tilegroup settings */
    var["groupTitles"] = array("Home", "Second tilegroup", "Group 3"); // titles of the tileGroups
    var["groupSpacing"] = array(4, 4, 3); // width of each tileGroup (spacing between the groups in tiles)
    var["groupDirection"] = "horizontal"; // put the groups in a vertical or horizontal order?
    var["mouseScroll"] = true; // disable or enable scrolling with mousewheel

    var["scrollSpeed"] = 550; // scrolling speed of tilegroups
    var["groupInactiveOpacity"] = 1; // opacity of tiles that are not in the current tilegroup. 1"] = full shown, 0.5"] = transparent, can have any value between 0 and 1
    var["groupInactiveClickable"] = true; // should the tiles in inactive groups be clickable, if false; it'll go to the tilegroup of the clicked tile
    var["groupShowEffect"] = 0; // the effect which shows the tiles when the page is loaded. 0 = a nice "wave" effect, 1 = fadeIn, 2= increase size  (!only works when $groupInactiveOpacity = 1)

    var["showSpeed"] = 400; // speed of the showing transition
    var["hideSpeed"] = 300; // hide speed of page transitions

    /* Background */
    var["bgColor"] = "#0F6D32"; // background color
    var["bgImage"] = "img/bg/metro_green.jpg"; // background image, leave blank if you dont want one. It is recommend to keep the filesize to a minimum and also, if possible, use a low resolution

    // Settings below are only needed when var["bgScrollType is parallax
    var["bgMaxScroll"] = 130; //set to 0 for no background scrolling
    var["bgWidth"] = 115; // in procent, in comparison to the screen width, so 125% is a quarter bigger than screen ,needed for scrolling, how bigger, how more scrolling
    var["bgScrollSpeed"] = 450; // in ms (recommend to set this to var["scrollSpeed-10) 

    /* Some behavior */
    var["scrollHeader"] = true; // wether the header should scroll with the page (true) or always stay visible (false)
    var["scrollHeaderTablet"] = false; // otherwise laggy
    var["disableGroupScrollingWhenVerticalScroll"] = false; // if the page is too high and not all tiles fit on screen, mousewheel triggers vertical scroll instead of tilegroup scroll. Set to false if you want always to have groupScrolling

    /*Follwing things work only in full version*/
    var["autoRearrangeTiles"] = true; // auto rearrange tiles when it doesn't fit on the browser? 
    var["autoResizeTiles"] = true; // auto resize tiles when it doesn't fit on the browser? Can cause markup problems!, will only work if var["autoRearrangeTiles is enabled
    var["autoRearrangeEffect"] = true; // if true, nice transition effect is used when rearranging tiles. Can be laggy if page is heavy, so disable it then.
    var["rearrangeTreshhold"] = 2;  // from which width the tiles should be rearranged? Just play with this value! Should be smaller than the most wide tilegroup.

    /*Defaults for tiles*/
    var["defaultBackgroundColor"] = "#509601";
    var["defaultLabelColor"] = "#476327";
    var["defaultLabelPosition"] = "top";

}